<template>
  <div>
    <top-label v-model="index">
      <span :slot="0">表面位移</span>
      <span :slot="1">浸润线</span>
      <span :slot="2">内部位移</span>
      <span :slot="3">干滩</span>
      <span :slot="4">库水位</span>
      <span :slot="5">降雨量</span>
      <!-- <span :slot="6">水质水量</span> -->
    </top-label>
    <el-card class="content">
      <el-col>
        <surface-displacement
          v-if="index === 0 && dataSource"
          :tailingPondId="tailingPondId"
        ></surface-displacement>
        <phreatic-line
          v-if="index === 1 && dataSource"
          :tailingPondId="tailingPondId"
        ></phreatic-line>
        <internal-displacement
          v-if="index === 2 && dataSource"
          :tailingPondId="tailingPondId"
        ></internal-displacement>
        <dry-beach-length
          v-if="index === 3 && dataSource"
          :tailingPondId="tailingPondId"
        ></dry-beach-length>
        <reservoir-water-level
          v-if="index === 4 && dataSource"
          :tailingPondId="tailingPondId"
        ></reservoir-water-level>
        <precipitation
          v-if="index === 5 && dataSource"
          :tailingPondId="tailingPondId"
        ></precipitation>
        <!-- <WaterQualityAndQuantity
        v-if="index === 6 && dataSource" :tailingPondId="tailingPondId"
      ></WaterQualityAndQuantity> -->
      </el-col>
    </el-card>
  </div>
</template>

<script>
import TopLabel from "~/components/TopLabel";
import SurfaceDisplacement from "~/views/warning-management/equipment-warning/SurfaceDisplacement";
import PhreaticLine from "~/views/warning-management/equipment-warning/PhreaticLine";
import InternalDisplacement from "~/views/warning-management/equipment-warning/InternalDisplacement";
import DryBeachLength from "~/views/warning-management/equipment-warning/DryBeachLength";
import ReservoirWaterLevel from "~/views/warning-management/equipment-warning/ReservoirWaterLevel";
import Precipitation from "~/views/warning-management/equipment-warning/Precipitation";
// import WaterQualityAndQuantity from "~/views/warning-management/equipment-warning/WaterQualityAndQuantity";

export default {
  name: "EquipmentWarning",
  components: {
    // WaterQualityAndQuantity,
    Precipitation,
    ReservoirWaterLevel,
    DryBeachLength,
    InternalDisplacement,
    PhreaticLine,
    TopLabel,
    SurfaceDisplacement,
  },
  props: {
    tailingPondIds: Number,
    require: true,
  },
  data() {
    return {
      index: 0,
      tailingPondId: null,
      dataSource: false,
    };
  },
  mounted() {},
  watch: {
    tailingPondIds: {
      handler(newName, oldName) {
        this.tailingPondId = this.tailingPondIds;
        console.log(this.tailingPondIds, this.tailingPondId);
        if (this.tailingPondId !== null) this.dataSource = true;
        this.$forceUpdate();
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped>
.content {
  margin-right: 5px;
  height: 87vh;
}
</style>
